<template>
  <a-drawer
    v-model:open="vdata.isShow"
    :title="vdata.isAdd ? '新增Student' : '编辑Student'"
    width="50%"
    :mask-closable="false"
    @close="vdata.isShow = false"
  >
    <a-form
      ref="itemForm"
      :model="vdata.itemData"
      :label-col="{ span: 6 }"
      :wrapper-col="{ span: 15 }"
      :rules="rules"
    >
      <a-row justify="space-between" type="flex">
        <a-col :span="12">
          <a-form-item label="Id" name="id">
            <a-input-number v-model:value="vdata.itemData.id" placeholder="请输入Id" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="StudentNo" name="studentNo">
            <a-input v-model:value="vdata.itemData.studentNo" placeholder="请输入StudentNo" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="Name" name="name">
            <a-input v-model:value="vdata.itemData.name" placeholder="请输入Name" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="Gender" name="gender">
            <a-select v-model:value="vdata.itemData.gender">
              <a-select-option value="1">男</a-select-option>
              <a-select-option value="2">女</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="Age" name="age">
            <a-input-number v-model:value="vdata.itemData.age" placeholder="请输入Age" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="BirthDate" name="birthDate">
            <a-date-picker
              v-model:value="vdata.itemData.birthDate"
              format="YYYY-MM-DD"
              placeholder="请输入BirthDate"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="ClassName" name="className">
            <a-input v-model:value="vdata.itemData.className" placeholder="请输入ClassName" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="EnrollDate" name="enrollDate">
            <a-date-picker
              v-model:value="vdata.itemData.enrollDate"
              format="YYYY-MM-DD"
              placeholder="请输入EnrollDate"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="Status" name="status">
            <a-select v-model:value="vdata.itemData.status">
              <a-select-option value="1">在读</a-select-option>
              <a-select-option value="2">毕业</a-select-option>
              <a-select-option value="3">休学</a-select-option>
              <a-select-option value="4">退学</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="Remark" name="remark">
            <a-textarea v-model:value="vdata.itemData.remark" placeholder="请输入Remark" />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>

    <div class="drawer-btn-center">
      <a-button :style="{ marginRight: '8px' }" @click="vdata.isShow = false">
        <CloseOutlined /> 取消
      </a-button>
      <a-button type="primary" :loading="vdata.confirmLoading" @click="handleOk">
        <CheckOutlined /> 保存
      </a-button>
    </div>
  </a-drawer>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import { CheckOutlined, CloseOutlined } from '@ant-design/icons-vue';
import { Student } from "./Student";
import dayjs from 'dayjs';
import { apiStudentAdd, apiStudentEdit } from './api';

interface State {
  isAdd: boolean;
  isShow: boolean;
  confirmLoading: boolean;
  itemData: Partial<Student>;
  record: Partial<Student> | null;
}

const props = defineProps({
  callbackFunc: { type: Function, default: () => {} }
});

const vdata = reactive<State>({
  isAdd: true,
  isShow: false,
  confirmLoading: false,
  itemData: {},
  record: null
});

const itemForm = ref();

// 表单验证规则
const rules = {
  id: [{ required: true, message: "请输入主键ID", trigger: "blur" }],
  studentNo: [{ required: true, message: "请输入学生学号，格式：S开头加6位数字", trigger: "blur" }],
  name: [{ required: true, message: "请输入学生姓名", trigger: "blur" }],
  gender: [{ required: true, message: "请输入性别：1-男，2-女", trigger: "blur" }],
  age: [{ required: true, message: "请输入年龄", trigger: "blur" }],
  birthDate: [{ required: true, message: "请输入出生日期", trigger: "blur" }],
  className: [{ required: true, message: "请输入所属班级", trigger: "blur" }],
  enrollDate: [{ required: true, message: "请输入入学日期", trigger: "blur" }],
  status: [{ required: true, message: "请输入学生状态：1-在读，2-毕业，3-休学，4-退学", trigger: "blur" }],
};

function show(record: Partial<Student> | null) {
  if (itemForm.value) {
    itemForm.value.resetFields();
  }

  vdata.isAdd = !record;
  vdata.itemData = {};
  vdata.confirmLoading = false;

  if (!vdata.isAdd && record) {
    vdata.record = record;
    vdata.itemData = {
      ...record,
      // 只转换业务相关的日期字段
      birthDate: record.birthDate ? dayjs(record.birthDate) : undefined,
      enrollDate: record.enrollDate ? dayjs(record.enrollDate) : undefined
    };
  }

  vdata.isShow = true;
}

function handleOk() {
  itemForm.value.validate().then(() => {
    vdata.confirmLoading = true;

    // 只处理业务相关的日期字段
    const submitData: Partial<Student> = {
      ...vdata.itemData,
      birthDate: dayjs.isDayjs(vdata.itemData.birthDate)
        ? vdata.itemData.birthDate.format('YYYY-MM-DD')
        : vdata.itemData.birthDate,
      enrollDate: dayjs.isDayjs(vdata.itemData.enrollDate)
        ? vdata.itemData.enrollDate.format('YYYY-MM-DD')
        : vdata.itemData.enrollDate
    };

    const apiCall = vdata.isAdd
      ? apiStudentAdd(submitData)
      : apiStudentEdit(vdata.record?.id as number, submitData);

    apiCall
      .then(() => {
        vdata.isShow = false;
        vdata.confirmLoading = false;
        props.callbackFunc();
      })
      .catch(() => {
        vdata.confirmLoading = false;
      });
  });
}

defineExpose({ show });
</script>

<style scoped>
.drawer-btn-center {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
</style>